<style scoped>
  .search-box{
    width:400px;margin-right:10px;
  }
</style>
<template>
<div class="page-wrapper">
  <div class="page-wrapper__body is-list">
  <div class="page-container">
    <div class="grid-container">
      <el-row class="grid-table-tool">
        <el-col :span="12" class="tool-action">
          <el-input v-model="params.key" placeholder="请输入关键词,例如:角色名称" @keyup.enter="onSearch" class="search-box">
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
        </el-col>
        <el-col :span="12" class="tool-pagination">
          <el-button type="primary" plain icon="el-icon-plus" @click="onEdit(0)">新增</el-button>
        </el-col>
      </el-row>
      <el-table border class="grid-table" v-loading="isLoading" :data="resp.dataList" width="100%">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column prop="name" label="角色名称" align="center" ></el-table-column>
        <el-table-column prop="remark" label="备注" align="center" ></el-table-column>
        <el-table-column prop="availableStatus" label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.availableStatus" :active-value="1" :inactive-value="0" @change="onChangeStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button @click="onEdit(scope.row.id)" type="primary" plain size="small">详情</el-button>
            <el-popover placement="top" width="160" v-model="scope.row.deleteVisible" >
              <p style="line-height: 30px;">确认删除？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" round type="text" @click="scope.row.deleteVisible = false">取消</el-button>
                <el-button type="primary" round size="small" @click="handleDelete(scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" type="danger" plain size="small" style="margin-left:7px;">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-row class="grid-table-tool">
        <el-col :span="12" class="tool-action">&nbsp;</el-col>
        <el-col :span="12" class="tool-pagination">
          <el-pagination background v-if="resp.total>params.pageSize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="params.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="params.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="resp.total">
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
  </div>
</div>
</template>

<script>
  import {findList, updateStatus, deleted} from "../../api/adminRole";

  export default {
    data(){
      return{
        resp:{
          dataList:[],
          total:0
        },
        params:{
          key: '',
          page: 1,
          pageSize: 10,
          sort: '',
          order: '',
        },
        isLoading:false,
      }
    },
    methods:{
      onChangeStatus(row){
        let dialogMsg = row.availableStatus == 1 ?  '确认启用所选角色？':'确认禁用所选角色？';
        this.$confirm(dialogMsg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleStatus(row);
        }).catch(() => {
          row.availableStatus = row.availableStatus == 1?0:1;
        });

      },
      async handleStatus(row){ // 启用 禁用 修改
        let resp = await updateStatus(row.id,row.availableStatus);
        let dialogMsg = row.availableStatus == 1 ?  '所选角色已启用!':'所选角色已禁用!';
        if(this.qUtil.validResp(resp)){
          this.$message({type: 'success', message: dialogMsg , showClose: true});
          this.loadData();
        }
      },
      async handleDelete(row){
        let resp = await deleted(row.id);
        if(!this.qUtil.validResp(resp)){
          this.$message({type: 'error', message: '删除失败!', showClose: true});
          return false;
        }
        this.$message({type: 'success', message: '删除成功!', showClose: true});
        if(this.resp.dataList.length===1 && this.params.page>1){
          this.params.page--;
        }
        this.loadData();
      },

      onSearch(){
        this.params.page = 1;
        this.loadData();
      },
      handleSizeChange(val) {
        this.params.pageSize = val;
        this.onSearch();
      },
      handleCurrentChange(val) {
        this.params.page = val;
        this.loadData();
      },
      onEdit(id){
        id = this.baseUtil.isBlank(id) ? 0 :id ;
        this.$router.push('/roleList/'+id)
      },
      async loadData(){
        this.isLoading = true;
        let resp = await findList(this.params);
        if(!this.qUtil.validResp(resp)){
          this.$message({type: 'error', message: '数据加载失败!', showClose: true});
          return false;
        }
        this.resp = resp.data;
        this.isLoading = false;
      }
    },
    mounted(){
      this.loadData();
    }
  }
</script>